<template>
  <div>
    <el-table :data="tab" style="width: 100%">
      <!-- 图片列 -->
      <el-table-column label="封面" width="100">
        <template slot-scope="scope">
          <el-image
            style="width: 100px; height: 100px"
            :src="scope.row.bookImage"
            :preview-src-list="[scope.row.bookImage]"
          ></el-image>
        </template>
      </el-table-column>

      <!-- 书名列 -->
      <el-table-column prop="bookName" label="书名"></el-table-column>

      <!-- 作者列 -->
      <el-table-column prop="bookAuth" label="作者"></el-table-column>

      <!-- 操作列 -->
      <el-table-column label="收藏状态">
        <template slot-scope="scope">
          <el-button
            v-if="scope.row.userCollectionStatus === 1"
            type="primary"
            @click="BookListing(scope.row)"
          >
            收藏
          </el-button>
          <el-button
            v-else
            type="warning"
            @click="BookRemoval(scope.row)"
          >
            取消收藏
          </el-button>
        </template>
      </el-table-column>

      <!-- 添加到购物车列 -->
      <el-table-column label="添加到购物车">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-circle-plus-outline" circle @click="addShoppingCart(scope.row)"></el-button>
        </template>
      </el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="secs.pageNum"
        :page-sizes="[3, 5, 8]"
        :page-size="secs.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "MyCollection",
  data() {
    return {
      tab: [],
      total: 0,
      secs: {
        pageNum: 1,
        pageSize: 3,
      },
    };
  },
  methods: {
    addShoppingCart(val){
      console.log(val.bookId);
      this.$prompt('请输入数量', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^[1-9]\d*$/,
                inputErrorMessage: '格式不正确'
              }).then(({ value }) => {
                const formDate =new FormData();
                formDate.append("bookId",val.bookId);
                formDate.append('number',value);
                this.$http.post('/bookInfo/addShoppingCart',formDate).then(resp=>{
                  console.log(resp);
                  if (resp.data==200) {
                    this.$message({
                      type: 'success',
                      message: "添加成功"
                    });
                  }
                })


              }).catch(() => {
                this.$message({
                  type: 'info',
                  message: '取消输入'
                });
              });
    },
    handleSizeChange(val) {
      this.secs.pageSize = val;
      this.secs.pageNum = 1;
      this.fetchData();
    },
    handleCurrentChange(val) {
      this.secs.pageNum = val;
      this.fetchData();
    },
    fetchData() {
      const data=new FormData();
      data.append("pageNum",this.secs.pageNum)
      data.append("pageSize",this.secs.pageSize)
      this.$http.post('/userInfo/selectCollect',data)
      .then(resp => {
        console.log(resp);
        this.tab = resp.data.data; // 确保这个路径匹配
        this.total = resp.data.total; // 假设后端返回了总数
      })
      .catch(err => {
        console.error('获取用户数据失败', err);
      });
    },
    BookListing(book) {
      let formData = new FormData();
      formData.append('bookId', book.bookId); // 调整此处不再是 bookInfo.bookId
      this.$http.post('/userInfo/addCollect', formData)
      .then(response => {
        console.log('成功收藏书籍:', response);
        this.fetchData(); // 更新数据
      })
      .catch(error => {
        console.error('收藏书籍失败:', error);
      });
    },
    BookRemoval(book) {
      let formData = new FormData();
      formData.append('bookId', book.bookId); // 调整此处不再是 bookInfo.bookId
      this.$http.post('/userInfo/collect', formData)
      .then(response => {
        console.log('成功取消收藏:', response);
        this.fetchData(); // 更A新数据
      })
      .catch(error => {
        console.error('取消收藏失败:', error);
      });
    }
  },
  created() {
    this.fetchData();
  }
}
</script>
